<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
		<title></title>
		<style type="text/css">
			#box {
				width: 100px;
				height: 100px;
				background: pink;
			}
		</style>
	</head>

	<body>
		<div id="box"></div>
		<p>新文件</p>
	</body>
	<script type="text/javascript" src="swiper/touchjs.min.js"></script>
	<script type="text/javascript">
	
		var rx = 0;
		var ry = 0;
		touch.on('#target', 'touchstart', function(ev) {
			ev.preventDefault();
		});      //?这里target还未获取，为什么可以使用
		
		var target = document.getElementById("box");
		target.style.webkitTransition = 'all ease 0.2s';
		touch.on(window, 'swiperight', function(ev) {
		    rx += 10;
			target.style.webkitTransform = "translateX(" + rx + "px)" + "translateY(" + ry + "px)";
		});
		touch.on(window, 'swipeleft', function(ev) {
			rx -= 10;
			target.style.webkitTransform = "translateX(" + rx + "px)" + "translateY(" + ry + "px)";
		});
		touch.on(window, 'swipeup', function(ev) {
		    ry -= 10;
			target.style.webkitTransform = "translateX(" + rx + "px)" + "translateY(" + ry + "px)";
		});
		touch.on(window, 'swipedown', function(ev) {
			ry += 10;
			target.style.webkitTransform =  "translateX(" + rx + "px)" + "translateY(" + ry + "px)";
		});
	</script>

</html>